import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { NavBar,Input,Cell,Calendar, Button } from 'react-vant';
const Home =()=>{
    const [visible,setVisible]=useState(false)
    const [date,setDate]=useState('')
     const [start,setStart]=useState('')
     const [end,setEnd]=useState('')
     const navigate=useNavigate()
    //计算日期
     const formatDate = (date) => {
    return `${date.getMonth() + 1}/${date.getDate()}`;
  };
  //选择日期值
    const onConfirm = (date) => {
    const dateStr = formatDate(date);
    setDate(dateStr);
    setVisible(false);
  };
  
  //去往列表页面
  const goList=()=>{
    if(start===''||end===''||date===''){
        alert('请先选择城市和日期')
       return
    }else{
      navigate(`/list?start=${start}&end=${end}&date=${date}`)
    }
  }

  localStorage.setItem('date',date)
    return (
        <div>
             {/* 导航标题 */}
            <NavBar title='首页' leftArrow=""></NavBar>
     
            {/* 输入城市 */}

            <div className="city">
                <Cell>
                   <Input placeholder='出发城市' value={start} onChange={(value)=>setStart(value)}/>
                </Cell>
                <Cell>
                    <Input placeholder='到达城市' value={end} onChange={(value)=>setEnd(value)}/>
                </Cell>
                
            </div>
              {/* 选择日期 */}
            <Cell title="选择日期" value={date} onClick={() => setVisible(true)} />
           <Calendar visible={visible} onConfirm={onConfirm} />
            

            <Button block round type='primary' onClick={()=>goList()}>查询</Button>
        </div>
    )
}

export default Home